<template>
<div>
  <h2 style="margin-top: 20px">典型设备故障树生成</h2>
  <div class="search" style="margin-top: 30px">
    故障总成：
    <!-- <el-input placeholder="请输入内容"
              prefix-icon="el-icon-search"
              slot="reference"
              v-model="searchInput"
              @keyup.enter.native="OnSubmit"
              style="width: 400px">
    </el-input> -->
    <el-select v-model="searchInput" filterable @change="OnSubmit" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
  <h3 style="margin-bottom: 10px; margin-top: 20px">查询结果</h3>
  <el-card shadow="hover" style="min-height: 200px">
    <div ref="refChart" style="width: 100%; height: 700px"></div>
  </el-card>

</div>
</template>

<script>
import * as echarts from "echarts"
import {request} from "../network/2";

export default {
  name: "tree",
  data(){
    return{
      options: [{
          value: '辊系',
          label: '辊系'
        }, {
          value: '给料',
          label: '给料'
        }, {
          value: '稀油润滑系统',
          label: '稀油润滑系统'
        }, {
          value: '传动系统',
          label: '传动系统'
        }, {
          value: '液压系统',
          label: '液压系统'
        }],
      c_data: {name: '设备',children: []},
      searchInput: ''
    }
  },
  // created() {
  //   // this.getRes()
  //   this.GetRes()
  //   console.log("created")
  //   console.log(this.c_data)
  // },
  mounted() {
    this.initChart()
    this.GetRes()

  },
  methods:{
    OnSubmit(e){
      if (this.searchInput != "") {
        this.$router.push({name: "Tree", params:{id: this.searchInput}})
        location.reload()
      }
    },
    initChart(){
      this.myChart = echarts.init(this.$refs.refChart)
    },
    async GetRes(){
      let res = await request('/tree', {id: this.$route.params.id})
      // console.log(res);
      this.c_data = res.data
      console.log('func')
      console.log(this.c_data)
      this.updateChart()
    },
    updateChart(){
      var option;

      const datas = this.c_data;
      console.log(datas);

      option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [datas],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 15
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }

      option && this.myChart.setOption(option);
      this.myChart.on("click", function (param){
        console.log(param.data);
      })

    },

    init(){

      var myChart = echarts.init(this.$refs.refChart)
      var option;


      option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [this.c_data],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }

      option && myChart.setOption(option);
      myChart.on("click", function (param){
        console.log(param.data);
      })
    },

  }
}
</script>

<style scoped>

</style>